import React, { Component } from 'react'
import './search.scss'


export default class index extends Component {
    constructor() {
        super()
        this.state = {
            recommend: [],
            searchValue: ''
        }
    }
    render () {
        return (

            <div className="head-inner">
                <div className=" main clearflx">
                    <div className="logo fl">
                        <a href="/"><img src="//b.appsimg.com/upload/momin/2019/02/21/133/1550737570483.png" alt="品牌特卖" id="J-vipLogo" height="100" />  </a>

                    </div>
                    {/* 小logo */}
                    <div className="c-service fl">
                        <a className="a1" href="//viva.vip.com/act/supportInsurance?wapid=vivac_767"> </a>
                        <a className="a2" href="//help.vip.com/commitment.php"> </a>
                        <a className="a3" href="https://www.vip.com/"> </a>
                        <img className="c-service-img  J-service-img  " src="//b.appsimg.com/upload/momin/2019/06/24/19/1561344075509.png" alt="" width="304" height="100" />
                    </div>

                    <div className="sackbox fr">
                        购物袋
                            <span className="sack"></span>
                        <span className="circle">0</span>
                        {/* 下面的框框 */}
                        <div className="sack_bottom">
                            <p>你好像还未登录！ <a href="/">马上登录</a> 查看购物袋吧</p>
                            <div className="gg"></div>
                        </div>
                    </div>
                    {/* 搜索框 */}
                    <div className="searchbox fr">
                        <input className="abcd" type="text" name="" id=""
                            onBlur={this.inputOnBlur}
                            onFocus={this.inputOnFocus}
                            onChange={this.searchPro}
                            value={this.state.searchValue}
                        />
                        <span className="fdj" onClick={this.toSearch()}>
                            <i></i>
                        </span>
                        <p>
                            <a href="/">女士羽绒服</a><span>|</span>
                            <a href="/">男士羽绒服</a><span>|</span>
                            <a href="/">女靴</a><span>|</span>
                            <a href="/">女士大衣</a><span>|</span>
                            <a href="/">护肤套装</a>
                        </p>
                        {/* 搜索框下面的框框 */}
                        <div className="c-search-helper">
                            <div className="left fl">
                                <p className="box"><span className="trash"></span>搜索记录</p>
                            </div>
                            <div className="right fl">
                                <p className="box">精品推荐</p>
                                <div className="recommend">
                                    {
                                        this.state.recommend.map(item => {
                                            return <a href="/" key={item.id}><span>{item.title}</span></a>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        )
    }
    componentDidMount () {
        this.getRecommend()
    }
    // 获取推荐
    getRecommend = async () => {
        const res = await this.$axios.get("//localhost:5000/heard")
        this.setState({
            recommend: res.data[0].recommend
        })
    }
    //获取焦点时显示
    inputOnFocus = () => {
        const box = window.document.querySelector('.c-search-helper')
        box.style.display = "block"
    }
    //失去焦点或者点击不在框框中时隐藏
    inputOnBlur = () => {
        const box = window.document.querySelector('.c-search-helper')
        const body = window.document.querySelector('body')
        const input = window.document.querySelector('.abcd')
        body.addEventListener('click', function (e) {
            // console.log(e.target)
            if (e.target.offsetParent !== box && e.target !== input) {
                box.style.display = "none"
            }
        })

    }
    //搜索框输入文字
    searchPro = (e) => {
        this.setState({
            searchValue: e.target.value
        }, function () {
            // console.log(this.state.searchValue)
        })
    }
    // 搜索按钮
    toSearch = () => {
        // this.state.searchValue
        this.props.searchItems()
    }
}






